<template>
  <div>
    <tContent title="上传资料">
      <template slot="pannelContent">
        <div class="container">
          <van-row>
            <van-col span="24">
              <h4>实拍视频<span>时间限制在20秒以内</span></h4>
            </van-col>
          </van-row>
          <van-uploader
            preview-size="90"
            upload-text="实拍视频"
            v-model="fileList.videoImg"
            multiple
            :max-count="1"
          >
            <template #preview-cover>
              <div class="preview-cover van-ellipsis">实拍视频</div>
            </template>
          </van-uploader>
          <van-divider dashed />
          <van-row>
            <van-col span="24">
              <h4>实拍图片<span>最少10张照片，每张照片2M以内</span></h4>
            </van-col>
          </van-row>
          <div class="flexbox">
            <van-uploader
              preview-size="90"
              upload-text="小区大门"
              v-model="fileList.gateImg"
              :max-count="1"
            >
              <template #preview-cover>
                <div class="preview-cover van-ellipsis">小区大门</div>
              </template>
            </van-uploader>
            <van-uploader
              preview-size="90"
              upload-text="小区楼栋号"
              v-model="fileList.apartmentImg"
              :max-count="1"
            >
              <template #preview-cover>
                <div class="preview-cover van-ellipsis">小区楼栋号</div>
              </template>
            </van-uploader>
            <van-uploader
              preview-size="90"
              upload-text="小区单元楼"
              v-model="fileList.buildingImg"
              :max-count="1"
            >
              <template #preview-cover>
                <div class="preview-cover van-ellipsis">小区单元楼</div>
              </template>
            </van-uploader>
            <van-uploader
              preview-size="90"
              upload-text="入户门牌"
              v-model="fileList.houseNumberImg"
              :max-count="1"
            >
              <template #preview-cover>
                <div class="preview-cover van-ellipsis">入户门牌</div>
              </template>
            </van-uploader>
            <van-uploader
              preview-size="90"
              v-for="item in 6"
              :key="item"
              :upload-text="'室内' + item"
              v-model="fileList.indoorImg[item]"
              multiple
              :max-count="1"
            >
              <template #preview-cover>
                <div class="preview-cover van-ellipsis">室内{{ item }}</div>
              </template>
            </van-uploader>
          </div>
          <van-divider dashed />
          <div class="desc">
            <van-field
              v-model="message"
              label="备注"
              rows="1"
              autosize
              type="textarea"
              placeholder="请输入备注"
            />
          </div>
        </div>
      </template>
    </tContent>
    <van-button
      class="largeBtn"
      type="primary"
      @click="upload"
      :disabled='!completeUpload'
      >确定上传</van-button
    >
  </div>
</template>

<script>
import tContent from '@/components/templete/content.vue'

export default {
  data() {
    return {
      fileList: {
        gateImg: [],
        apartmentImg: [],
        buildingImg: [],
        houseNumberImg: [],
        indoorImg: [],
        videoImg: []
      },
      message: '',
    }
  },
  components: {
    tContent
  },
  computed:{
      completeUpload(){
         for(const key in this.fileList){
             console.log(key)
             if(!this.fileList[key].length){
                 return false
             }else{
                 return true
             }
         }
      }
  },
  methods:{
      upload(){
          //上传数据
          //跳转
          this.$router.push('/result/uploadSuccess')
      }
  },

}
</script>

<style lang="less" scoped>
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
.container {
  padding: @padding-md @padding-sm*2;
  h4 {
    margin-bottom: @padding-sm;
    span {
      font-size: @font-size-sm;
      padding-left: @padding-sm;
      font-weight: 400;
    }
  }
}
.largeBtn {
  margin-left: 5%;
  width: 90%;
  margin-bottom: 30px;
}
.flexbox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>
